//疑似健康老人申请
<template>
  <div class="Apply_bj">
    <div class="flexC">
      <div class="flex">
        <ul class="Inv_ul flex AlignItemsC colorF font_s30">
          <li @click="categoryFun(1)" :class="{ category: category === 1 }" class="flexC JustifyContentFE flex2 textC cursor">
            <p>评估等级为0-1级的占比</p>
            <p>大于30%的街镇</p>
          </li>
          <li @click="categoryFun(2)" :class="{ category: category === 2 }" class="flex2 textC cursor">
            <p>日受理人数（初次评估）</p>
            <p>大于20人的街镇</p>
          </li>
          <li @click="categoryFun(3)" :class="{ category: category === 3 }" class="flex2 textC cursor">
            <p>日申请人数（初次评估）</p>
            <p>大于20人的护理机构</p>
          </li>
        </ul>
      </div>
      <div class="flexC modal_main">
        <ul v-if="category === 1" class="Inv_ula flex AlignItemsC JustifyContentC colorF font_s22 AlignItemsC textC">
          <li class="flex2">序号</li>
          <li class="flex2">评估月份</li>
          <li class="flex3">街道名称</li>
          <li class="flex2">0-1的占比</li>
          <li class="flex2">处置人</li>
          <li class="flex2">处置状态</li>
          <li class="flex4">完成时间</li>
          <li class="flex2">处置结果</li>
        </ul>
        <ul v-if="category === 2" class="Inv_ula flex AlignItemsC JustifyContentC colorF font_s22 AlignItemsC textC">
          <li class="flex2">序号</li>
          <li class="flex2">受理日期</li>
          <li class="flex4 Item_Hover">
            <p>
              机构名称
              <span style="font-size: 16px;color: #04a5ff;">▼</span>
            </p>
            <ul class="select_box font_S20 superviseList" style="width:10%;left:22%;">
              <li @click="categoryFun(2)">查看全部</li>
              <li v-for="(item, index) in dict" :key="index" @click="getCodeInfo(category, item)">{{ item.name }}</li>
            </ul>
          </li>
          <li class="flex2">
            受理人数
            <br />
            （初评）
          </li>
          <li class="flex2">处置人</li>
          <li class="flex2">处置状态</li>
          <li class="flex3">完成时间</li>
          <li class="flex4">处置结果</li>
          <!-- <li class="flex2">附件</li> -->
        </ul>
        <ul v-if="category === 3" class="Inv_ula flex AlignItemsC JustifyContentC colorF font_s22 AlignItemsC textC">
          <li class="flex2">序号</li>
          <li class="flex2">受理日期</li>
          <li class="flex3">服务机构名称</li>
          <li class="flex3 Item_Hover">
            <p>
              所在街道
              <span style="font-size: 16px;color: #04a5ff;">▼</span>
            </p>
            <ul class="select_box font_S20 superviseList" style="width:10%;">
              <li @click="categoryFun(3)">查看全部</li>
              <li v-for="(item, index) in dict" :key="index" @click="getCodeInfo(category, item)">{{ item.name }}</li>
            </ul>
          </li>
          <li class="flex2">申请人数</li>
          <li class="flex2">处置人</li>
          <li class="flex2">处置状态</li>
          <li class="flex2">完成时间</li>
          <li class="flex4">处置结果</li>
          <!-- <li class="flex2">附件</li> -->
        </ul>
        <div style="height: 50vh;" class="superviseList font_s20">
          <ul v-show="category === 1" v-for="(item, index) in pgDataList" :key="item.id" class="Inv_ulb flex colorF Bold textC AlignItemsC">
            <li class="flex2">{{ (current - 1) * pageSize + index + 1 }}</li>
            <li class="flex2">{{ item.fxsj.substr(0, 7) }}</li>
            <li class="flex3">{{ item.bjgdx }}</li>
            <li class="flex2" style="color: red;">{{ item.jgwtms }}</li>
            <li class="flex2" style="padding: 0.625rem 0">{{ item.czr }}</li>
            <li class="flex2" style="padding: 0.625rem 0">{{ item.czzt }}</li>
            <li class="flex4">{{ item.czwcsj }}</li>
            <li class="flex2" :class="{ cursor: item.fjlb.length }" @click="showPdf(item)">{{ item.czjg }}</li>
          </ul>
          <ul v-show="category === 2" v-for="(item, index) in slDataList" :key="item.id" class="Inv_ulb flex colorF Bold textC AlignItemsC">
            <li class="flex1">{{ (current - 1) * pageSize + index + 1 }}</li>
            <li class="flex2">{{ item.fxsj }}</li>
            <li class="flex4">{{ item.bjgdx }}</li>
            <li class="flex2">{{ item.jgwtms }}</li>
            <li class="flex2" style="padding: 0.625rem 0">{{ item.czr }}</li>
            <li class="flex2" style="padding: 0.625rem 0">{{ item.czzt }}</li>
            <li class="flex3">{{ item.czwcsj }}</li>
            <li class="flex4 textL" :class="{ cursor: item.fjlb.length }" @click="showPdf(item)">{{ item.czjg }}</li>
            <!-- <li class="flex2">{{ fjInfo[index] }}</li> -->
          </ul>
          <ul v-show="category === 3" v-for="(item, index) in sqDataList" :key="item.id" class="Inv_ulb flex colorF Bold textC AlignItemsC">
            <li class="flex1">{{ (current - 1) * pageSize + index + 1 }}</li>
            <li class="flex2">{{ item.fxsj }}</li>
            <li class="flex3">{{ item.bjgdx }}</li>
            <li class="flex3">{{ item.jgmc }}</li>
            <li class="flex2">{{ item.jgwtms }}</li>
            <li class="flex2" style="padding: 0.625rem 0">{{ item.czr }}</li>
            <li class="flex2" style="padding: 0.625rem 0">{{ item.czzt }}</li>
            <li class="flex2">{{ item.czwcsj }}</li>
            <li class="flex4 textL" :class="{ cursor: item.fjlb.length }" @click="showPdf(item)">{{ item.czjg }}</li>
            <!-- <li class="flex2">{{ fjInfo[index] }}</li> -->
          </ul>
        </div>
      </div>
    </div>
    <!-- 分页 -->
    <div class="wrapper"><pagination v-show="showPage" :total="total" :current="current" :pageSize="pageSize" @getPageSize="getPageSize" @jump="jump"></pagination></div>
    <!-- 条件查询没有符合条件的数据时显示提示信息 -->
    <div class="messageBoxStyle FontWeightB font_s28" v-show="showErrorMessage"><p>没有符合条件的数据</p></div>
    <!-- 数据加载中的提示信息 -->
    <div class="messageBoxStyle FontWeightB font_s28" v-show="showWaitingMessage"><p>数据加载中，请等待...</p></div>
    <!-- 组件引用：信访投诉显示PDF -->
    <YiBaoRect03 v-if="choosePDF" @hidden="hiddenRect(choosePDF)" class="superviseList">
      <div v-for="(item, index) in srcPDF" :key="index" style="width: 100%;height: 100%;">
        <iframe :src="item.fjlj" scrolling="yes" style="width: 100%;height: 100%;" frameborder="0" allowfullscreen="true"></iframe>
      </div>
    </YiBaoRect03>
  </div>
</template>
<script>
// 显示PDF文件的弹窗
import YiBaoRect03 from '@/components/YiBaoRect03'
export default {
  name: 'ComLfet',
  components: {
    YiBaoRect03,
    pagination: resolve => {
      require(['@/components/pagination'], resolve)
    }
  },
  data () {
    return {
      // 分页参数
      total: 20, // 总页数
      current: 1, // 当前页面下标
      pageSize: 10, // 页面显示条数
      showPage: true, // 显示隐藏分页
      category: 1,
      arr1: [],
      arr2: [],
      arr3: [],
      // 将请求到的数据赋值到dataList
      pgDataList: [],
      slDataList: [],
      sqDataList: [],
      jgType: 211,
      jdCode: '',
      // 将请求到的字典表的数据赋值给本地数组
      dict: [],
      fjInfo: [],
      // 无符合筛选条件显示内容
      showErrorMessage: false,
      showWaitingMessage: false,
      // PDF在服务器端的路径
      choosePDF: false,
      pdfUrl: '',
      srcPDF: []
    }
  },
  created () {
    this.postData()
    this.getData()
  },
  methods: {
    // 分页
    jump (index) {
      this.current = index
      this.postData()
    },
    getPageSize (pageSize) {
      this.current = 1
      this.pageSize = pageSize
      this.postData()
    },
    hiddenRect (choose) {
      if (choose === this.choosePDF) {
        this.choosePDF = false
        // 清空数据
        this.srcPDF = []
      }
    },
    showPdf (pdfItem) {
      if (pdfItem.fjlb.length !== 0) {
        this.choosePDF = true
        // this.yutanpdf = pdfItem.fjlb[0].fjlj;
        this.srcPDF = pdfItem.fjlb
      }
    },
    categoryFun (index) {
      // 默认第一页
      this.current = 1
      this.showPage = true
      this.category = index
      this.jdCode = ''
      this.pgDataList = []
      this.slDataList = []
      this.sqDataList = []
      if (index === 1) {
        this.jgType = 211
        this.postData()
      } else if (index === 2) {
        this.jgType = 212
        this.postData()
        this.getData()
      } else {
        this.jgType = 213
        this.postData()
        this.getData()
      }
    },
    postData () {
      this.showPage = true
      this.showErrorMessage = false
      this.dataList = []
      if (this.dataList.length === 0) {
        this.showWaitingMessage = true
      }
      this.$http.post(this.$api.TotalList.totalList, 'jglx=' + this.jgType + '&jdCode=' + this.jdCode + '&page=' + this.current + '&limit=' + this.pageSize, true).then(result => {
        if (this.category === 1) {
          this.pgDataList = result.data.result
          // console.log(this.pgDataList);
          if (this.pgDataList.length === 0) {
            this.showPage = false
            this.showErrorMessage = true
            this.showWaitingMessage = false
          } else {
            this.showWaitingMessage = false
          }
        } else if (this.category === 2) {
          this.slDataList = result.data.result
          if (this.slDataList.length === 0) {
            this.showPage = false
            this.showErrorMessage = true
            this.showWaitingMessage = false
          } else {
            this.showWaitingMessage = false
          }
          this.fjInfo = []
          for (let i = 0; i < this.sqDataList.length; i++) {
            if (this.sqDataList[i].fjlb.length !== 0) {
              this.fjInfo[i] = '查看PDF'
            }
          }
        } else {
          this.sqDataList = result.data.result
          if (this.sqDataList.length === 0) {
            this.showPage = false
            this.showErrorMessage = true
            this.showWaitingMessage = false
          } else {
            this.showWaitingMessage = false
          }
          this.fjInfo = []
          for (let i = 0; i < this.sqDataList.length; i++) {
            if (this.sqDataList[i].fjlb.length !== 0) {
              this.fjInfo[i] = '查看PDF'
            }
          }
        }
        // 总页数
        this.total = Math.ceil(result.data.count / this.pageSize)
      })
    },
    getData () {
      this.dict = []
      // 请求字典表中筛选条件的数据
      this.$http.get(this.$api.QueryDict.queryDict, true).then(result => {
        let temp = result.data.result
        for (let i = 0; i < temp.length; i++) {
          if (temp[i].description === 'JD_CODE') {
            this.dict.push(temp[i])
          }
        }
      })
    },
    getCodeInfo (num, code) {
      this.showPage = true
      // 筛选功能等后端数据
      this.jdCode = code.code
      this.pgDataList = ''
      this.slDataList = ''
      this.sqDataList = ''
      this.postData()
    }
  }
}
</script>
<style lang="scss" scoped>
.Apply_bj {
  width: 100%;
  height: 100%;
  .wrapper {
    height: 100%;
    width: 100%;
  }
  .Inv_ul {
    width: 89.375rem;
    height: 4.375rem;
    margin: 1.285rem auto 0.825rem;
    color: rgba($color: #04a5ff, $alpha: 0.8);
    font-weight: bold;
  }
  .Inv_ula {
    width: 100%;
    font-weight: bold;
    border: 1px solid rgba(0, 255, 255, 1);
    overflow: hidden;
    box-sizing: border-box;
    li {
      height: 2.825rem;
      line-height: 2.825rem;
    }
    .Item_Hover {
      cursor: pointer;
      .select_box {
        border: 1px solid #ffffff;
        padding: 0.25rem 1.625rem;
        background: #1d3843;
        position: absolute;
        left: 30%;
        display: none;
        height: 50%;
        overflow: auto;
      }
    }
    .Item_Hover:hover .select_box {
      display: block;
    }
  }
  .Inv_ulb {
    font-weight: bold;
    width: 100%;
    overflow: hidden;
    li {
      padding: 0.625rem 0;
    }
  }
  .superviseList {
    overflow-x: hidden;
    overflow-y: auto;
  }
  .superviseList::-webkit-scrollbar {
    width: 6px;
    border-radius: 10px;
    background: rgba($color: #fff, $alpha: 0.6);
  }
  .superviseList::-webkit-scrollbar-thumb {
    border-radius: 10px;
    background: rgba($color: #fff, $alpha: 1);
  }
  .Inv_ulb:nth-child(even) {
    background: rgba(0, 255, 255, 0.1);
  }
  .category {
    color: #30dfff;
  }
}
</style>
